<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>合租详情</title>

    <link rel="stylesheet" th:href="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/airent/common/css/nav.css}">
    <link rel="stylesheet" th:href="@{/airent/common/css/footer.css}">
    <link rel="stylesheet" th:href="@{/airent/css/roomatedesc.css}">
    <link rel="stylesheet" th:href="@{/airent/plugins/bootstrap-star-rating-master/css/star-rating.min.css}">

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=nGGIg5o99yFrRmVRM5sgX9LUi39ObA3Y"></script>
    <script th:src="@{/airent/plugins/jquery/jquery.min.js}"></script>
    <script th:src="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/js/bootstrap.min.js}"></script>
    <script th:src="@{/airent/js/iconfont.js}"></script>


    <!-- <link rel="shortcut icon" href="favicon.ico"> <link href="../plugins/H+/css/bootstrap.min.css?v=3.3.6" rel="stylesheet"> -->
    <link th:href="@{/airent/plugins/H+/css/font-awesome.css?v=4.4.0}" rel="stylesheet">
    <link th:href="@{/airent/plugins/H+/css/plugins/blueimp/css/blueimp-gallery.min.css}" rel="stylesheet">
    <link th:href="@{/airent/plugins/H+/css/animate.css}" rel="stylesheet">
    <link th:href="@{/airent/plugins/H+/css/animate.css}" rel="stylesheet">
    <link th:href="@{/airent/plugins/H+/css/style.css?v=4.1.0}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/airent/plugins/font-awesome-4.7.0/css/font-awesome.css}">


    <!-- 全局js -->
    <script th:src="@{/airent/plugins/H+/js/jquery.min.js?v=2.1.4}"></script>
    <script th:src="@{/airent/plugins/H+/js/bootstrap.min.js?v=3.3.6}"></script>

    <!-- 自定义js -->
    <script th:src="@{/airent/plugins/H+/js/content.js?v=1.0.0}"></script>

    <!-- blueimp gallery -->
    <script th:src="@{/airent/plugins/H+/js/plugins/blueimp/jquery.blueimp-gallery.min.js}"></script>

    <script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
    <style>
        .a{
            -webkit-box-shadow: 0 0 0 1000px white inset;
            border: 0px;
            outline: 0px;
        }
        #gender{
            background-color: rgb(209,218,222);
            border: 0px;
            outline: 0px;
            width: 60px;
        }
    </style>

</head>
<body>

<!-- 导航栏 -->
<div th:replace="~{head/topbar::topBar(activeUri = 'roommate')}"></div>

<div class="container">
    <form th:object="${house}">
        <div class="row">
            <div class="col-9">
                <div class="container">

                    <div class="report">
                        <a id="report" th:href="@{/report(houseNumber=${houseNumber})}"> 虚假房源? 点我举报</a>
                    </div>

                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab" href="#introduction" >房屋简介</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" th:href="@{#picture}" >房屋图片</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" th:href="@{#facility}" >设施介绍</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#map">周边环境</a>
                        </li>
                    </ul>

                    <!-- Tab panes -->
                    <div class="tab-content">

                        <div id="introduction" class="container tab-pane active"><br>
                            <input type="hidden" th:value="*{houseDto.villageName}" id="areaName">
                            <h1 >
                            <span>
                                <span th:text="*{houseDto.villageName}"></span>&nbsp;&nbsp;&nbsp;
                                <span th:text="*{houseDto.houseType}"></span>&nbsp;&nbsp;&nbsp;
                                <span th:text="*{houseDto.orientation}"></span>&nbsp;&nbsp;&nbsp;
                                <span class="badge badge-secondary" th:text="*{roommateGender}"></span>
                            </span>
                                <span class="price"><input class="a" th:value="*{cotenancyPrice}" style="color: red;text-align: right" readonly>/月</span>
                            </h1>

                            <hr>

                            <h3>基本信息</h3>

                            <div class="int">
                                <a href="javascript:void(0)" th:onclick="|collectHouse(*{houseDto.houseId})|" class="collect">
                                    <i class="fa fa-heart" id="collection">收藏</i>
                                </a>
                                <div>
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item">房源编号:<span th:text="*{houseNumber}"></span></li>

                                    </ul>
                                    <div class="row">
                                        <div class="col-md-10 offset-md-1 row">
                                            <div class="base-message col-md-6">
                                                <label>楼层：<span th:text="*{houseDto.floor}"></span></label>
                                            </div>
                                            <div class="base-message col-md-6">
                                                <label>朝向：<span th:text="*{houseDto.orientation}"></span></label>
                                            </div>
                                            <div class="base-message col-md-6" >
                                                <label th:if="*{houseDto.elvator} eq '1'">电梯：有</label>
                                                <label th:if="*{houseDto.elvator} ne '1'">电梯：无</label>
                                            </div>
                                            <div class="base-message col-md-6">
                                                <label>押付方式：
                                                    <span th:if="*{houseDto.payment == '0'} " th:text="不需要押金"></span>
                                                    <span th:if="*{houseDto.payment == '1'}" th:text="押一付一"></span>
                                                    <span th:if="*{houseDto.payment == '2'}" th:text="押一付二"></span>
                                                    <span th:if="*{houseDto.payment == '3'}" th:text="押一付三"></span>
                                                    <span th:if="*{houseDto.payment == '4'}" th:text="其他"></span>
                                                </label>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <br>

                            <h3>房屋介绍</h3>
                            <br>
                            <p class="dis" th:text="*{content}"></p>
                        </div>

                        <div id="picture" class="container tab-pane active"><br>
                            <h3>房屋图片</h3>
                            <hr>
                            <div class="lightBoxGallery" >
                                <div class="row">
                                    <div class="col-sm-3" th:each="img:${img}">
                                        <a th:href="${img.imgPath}" title="图片" data-gallery=""><img th:src="${img.imgPath}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                                    </div>
                                </div>

                            </div>

                            <div id="blueimp-gallery" class="blueimp-gallery">
                                <div class="slides"></div>
                                <h3 class="title"></h3>
                                <a class="prev">‹</a>
                                <a class="next">›</a>
                                <a class="close">×</a>
                                <a class="play-pause"></a>
                                <ol class="indicator"></ol>
                            </div>
                        </div>

                        <div id="facility" class="container tab-pane active"><br>
                            <h3>设施介绍</h3>
                            <hr>
                            <div class="container">
                                <div class="row">
                                    <div class="col">
                                        <div id="equip" class="card">
                                            <div class="card-header"><h5>房屋设施</h5></div>
                                            <div class="card-body">
                                                <div class="container">
                                                    <div class="row" >
                                                        <div class="col-sm-2" th:each="i : ${item}">
                                                            <div class="icon-img">
                                                                <svg class="icon" aria-hidden="true">
                                                                    <use th:href="${i.itemPath}"></use>
                                                                </svg>
                                                            </div>
                                                            <div class="icon-name" th:text="${i.itemName}"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col">
                                        <div id="charge" class="card">
                                            <div class="card-header"><h5>额外缴费</h5></div>
                                            <div class="card-body">
                                                <div class="container">
                                                    <div class="row">
                                                        <div class="col-sm-2" th:each="e:${extra}">
                                                            <div class="icon-img">
                                                                <svg class="icon" aria-hidden="true">
                                                                    <use th:href="${e.extraPath}"></use>
                                                                </svg>
                                                            </div>
                                                            <div class="icon-name" th:text="${e.extraName}"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                            </div>
                        </div>

                        <div id="map" class="container tab-pane active"><br>
                            <h3>周边地图</h3>
                            <hr>
                            <p>房屋地址: <span th:text="*{houseDto.houseArea}"></span>
                                <span th:text="*{houseDto.villageName}"></span>
                                <span th:text="*{houseDto.detailedAddress}"></span>
                            </p>
                            <div id="map-box" class="card-body text-dark">
                                <div id="container"></div>
                            </div>
                        </div>




                    </div>
                </div>
            </div>
            <div class="col-3">
                <div class="card" id="" style="width: 15rem;">
                    <img th:src="@{/airent/imgs/cat.jpg}" class="card-img-top">
                    <div class="card-body">
                        <div>
                            <h5 class="card-title" th:text="*{userDto.realName}"></h5>
                            <hr>
                        </div>
                        <div>
                            <p class="card-text" th:text="*{introduce}"></p>
                            <hr>
                        </div>
                        <div>
                            <p> 电话: <span th:text="*{userTel}"></span></p>
                            <a href="#" class="btn">联系我</a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- 底部 -->
<div th:replace="~{food/bottombar::topBar}"></div>


<script type="text/javascript">

    function collectHouse(ele){

        let collection = document.getElementById("collection");
        let url = '/cotenancy/collect/';
        $.post(url,"houseId="+ele,function (result){
            if (result == "1"){
                collection.innerHTML="取消收藏";
                collection.className="fa fa-heart-o";
            }else {
                collection.innerHTML="收藏";
                collection.className="fa fa-heart";
            }
        },"Json")
    }

    var map = new BMap.Map("container");
    // 创建地图实例
    var point = new BMap.Point(116.404, 39.915);
    // 创建点坐标
    map.centerAndZoom(point, 14);
    // 初始化地图，设置中心点坐标和地图级别
    var areaName=$("#areaName").val();
    //alert(areaName);
    var local = new BMap.LocalSearch(map, {
        renderOptions: {map: map, panel: "r-result"}
    });
    local.search(areaName);

    $("input").each(function(i){
        var input_size = $(this).val().length;
        this.size=input_size;
    });

</script>


</body>
</html>
